<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>填写信息</title>
	<link rel="stylesheet" type="text/css" href="/build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="/build/css/style.css">
	<link rel="stylesheet" type="text/css" href="/build/css/mui.picker.css">
	<link rel="stylesheet" type="text/css" href="/build/css/main.css">
	<script src="/build/public/vue.js" charset="utf-8"></script>
	<script src="/build/public/vue-resource.js" charset="utf-8"></script>
	<script src="/build/js/jquery.min.js"></script>
	<script src="/build/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/build/js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="/build/js/mine/city.data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background:#fff;">
	<div id="container">
		<ul class="edit-list register-list">
			<li class="normal-text">
				<i>姓名</i>
				<input type="text" v-model="name">
				<span class="iconfont cancel-btn">&#xe636;</span>
			</li>
			<li>
				<i>性别</i>
				<input type="text" id="genderBtn" v-model="gender" readonly>
				<span class="iconfont">&#xe61d;</span>
			</li>
			<li>
				<i>地区</i>
				<input type="text" id="cityBtn" v-model="city" readonly>
				<span class="iconfont">&#xe61d;</span>
			</li>
		</ul>
		<p class="first-register">备注：完善信息，请到个人资料修改</p>
		<div class="login-btn">
			<button class="resgiter-btn" type="button" @click="upData">确定</button>
		</div>
	</div>
<script src="/build/js/config.js" charset="utf-8"></script>
<script src="/build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		gender:'',
		city:'',
		genderValue:'',
		cityCode:'',
		name:'',
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.picker();
			vm.normalText();
		})
	},
	computed:{
		limit:function(){
			return this.introduction+'123'
		}
	},
	methods:{
		upData:function(){
			/*post('/advisor/financial-advisor/update',{
				name:vm.name,
				gender:vm.genderValue,
				location:vm.cityCode,
			},function(res){
				toast('保存成功');
				setTimeout('window.location.href="register.html"', 1000)
			})*/
			window.location.href="register.html"
		},
		normalText:function(){
			var normalInput = document.querySelectorAll('.normal-text input');

			for(var i=0;i<normalInput.length;i++){
				normalInput[i].addEventListener('focus',function(){
					var cancelBtn = document.querySelectorAll('.cancel-btn');
					for(var j=0;j<cancelBtn.length;j++){
						cancelBtn[j].style.display = 'none';
					}
					var parent = this.parentNode;
					var activeBtn = parent.querySelector('.iconfont');
					activeBtn.style.display = 'block';
					$this = this;
					activeBtn.addEventListener('click',function(){
						$this.value = '';
					},false)
				})
			}
		},
		picker:function(){
			var gender = [
				{text:'男',value:'MALE'},
				{text:'女',value:'FEMALE'},
				{text:'保密',value:'UNKNOW'},
			]
		//渲染picker数据
		vm.showData(gender);
		//性别picker
			var genderPicker = new mui.PopPicker();								//初始化
			genderPicker.setData(gender);											//赋值数据
			var genderBtn = document.getElementById('genderBtn');	//触发开启
			genderPicker.pickers[0].setSelectedValue(vm.genderValue,1000);
			genderBtn.addEventListener('tap',function(event) {
				genderPicker.show(function(items) {
					vm.genderValue = items[0].value;
					vm.gender = items[0].text;
				});
			}, false);
		//地区picker
			var cityPicker = new mui.PopPicker({layer:2},{buttons:['取消','确定']});
			var cityBtn = document.getElementById('cityBtn');
			cityPicker.setData(cityData);
			var proviceCode = vm.cityCode.slice(0,2)+'0000';
			cityPicker.pickers[0].setSelectedValue(proviceCode,600);
			setTimeout(function() {
				cityPicker.pickers[1].setSelectedValue(vm.cityCode,1000)
			},800);

			cityBtn.addEventListener('tap', function(event) {
					cityPicker.show(function (items) {
						vm.city = items[0].text + " " + items[1].text;
						vm.cityCode = items[1].value;
			  	})
			}, false);
		},
		showData:function(gender,work,life){
			for(var i=0;i<gender.length;i++){
				if(vm.genderValue == gender[i].value){
					vm.gender = gender[i].text;
				}
			}
			for(var i=0;i<cityData.length;i++){
				var proviceCode = vm.cityCode.slice(0,2)+'0000';
				if(cityData[i].value == proviceCode){
					var provice = cityData[i].text;
					for(var j=0;j<cityData[i].children.length;j++){
						if(cityData[i].children[j].value == vm.cityCode){
							provice+= '  '+cityData[i].children[j].text;
							vm.city = provice;
						}
					}
				}
			}

		},
	},watch:{
		//监听个人介绍字数
		introduction:function(val, oldVal){
			val = val.slice(0,50);
			vm.introduction = val;
			vm.limitWord = val.length;
		}
	}
})

</script>
</body>
</html>
